<template>
  <div class="chart">
    
    <span class="titleESB">铂诺智能云策略平台</span>
    <div class="feader_table">
      
      <div id='myChart' ref="myChart">
      </div>
    </div>
    
      <el-table
        :data="tableData2"
        style="width: 100%;padding-buttom:30px;"
        :row-style="tableRowStyle"
        :header-cell-style="{background:'#141e32',color: '#fff'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="指数"
          align="center"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="日线状态"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="轴线状态"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new2"
          label="月线状态"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new3"
          label="周线底部"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new4"
          label="周线向上"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new5"
          label="周线顶部"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new6"
          label="周线向下"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new7"
          label="基本面"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new8"
          label="低估率"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new9"
          label="贝塔值"
          width="100%">
        </el-table-column>
        <el-table-column
          align="center"
          prop="new10"
          label="AI舆情">
        </el-table-column>
      </el-table> 

    
   
  <div class="backcolor">
    <h2 class="zhongxing">舆情中心</h2>
    <br>
    <div class="centerzx">
      <div class="boxecharts" style="width:50%">
        <div id="graphbox" ref="graphbox" ></div>
      </div>
      <div class="boxecharts" style="width:50%" > 
        <div id="stockbox" ref="stockbox"></div>
        
        
      </div>
      <div class="tables">
          <h3>行业舆情实时榜</h3>
          <a>更多>></a>
          <el-table
          :row-style="tableRowStyle"
            :data="tableDataList"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="100">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
            <el-table-column
              prop="address22"
              label="地址">
            </el-table-column>
          </el-table>
        </div>
        
        <div class="tables">
          <h3>概念舆情实时榜</h3>
          <a>更多>></a>
          <el-table
          :row-style="tableRowStyle"
            :data="tableDataList1"
            border
            show-header:flase
            style="width: 100%">
            <el-table-column
              prop="date"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              width="100">
            </el-table-column>
            <el-table-column
              prop="address">
            </el-table-column>
          </el-table>
        </div>
    </div>
 


    <div class="publicCenter" style="">
      <div class="frontPublic">
        <h3>正面舆情</h3>
        <a>更多>></a>
        <ul class="centerbox" v-for="item in datalinew">          
        <li >{{item.name}}</li>
        </ul>
        
      </div>
      <div class="defeatPublic">
        <h3>正面舆情</h3>
        <a>更多>></a>
        <ul class="centerbox" v-for="item in datalinew1">
          <li >{{item.name}}</li>
          </ul>        
         
      </div>
    </div>
  </div>  

  </div>
</template>
<script>
  // import EchartsJs from './Echarts.js'
  import echarts from 'echarts'

  export default {
    data() {
      return{
        tableDataList: [
          {
            date: '1',
            name: '服装家纺',
            address: '嘉麟杰',
            address22: '太平鸟'
          }, {
            date: '2',
            name: '纺织制造',
            address: '华纺控股',
            address22: '浙江芙蓉'
            
          }, {
            date: '3',
            name: '公交',
            address: '德新公交',
            address22: '强生控股'
            
          },
        ],
        tableDataList1: [
          {
            date: '1',
            name: '语言技术',
            address: '科大讯飞'
          }, {
            date: '2',
            name: '水泥',
            address: '华新水泥'
          }, {
            date: '3',
            name: '电力改革',
            address: '岷江水电'
          }
        ],
        tableData2: [
          {date: '上证指数',name: '向上',address: '向下',new2:'40.62%',new3:'40.62%',new4:'40.62%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '上证50',name: '向上',address: '向下',new2:'40.62%',new3:'30.62%',new4:'40.62%',new5:'2%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '中小板指',name: '向上',address: '向下',new2:'40.62%',new3:'20.62%',new4:'40.62%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '创业板指',name: '向上',address: '底分型',new2:'40.62%',new3:'45.62%',new4:'40.62%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'0.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '沪深',name: '向上',address: '向下',new2:'40.62%',new3:'32.62%',new4:'40.62%',new5:'8%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '中证500',name: '向上',address: '向下',new2:'40.62%',new3:'20.62%',new4:'40.62%',new5:'40.62%',new6:'2%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '新三板指',name: '向上',address: '向下',new2:'40.62%',new3:'10.62%',new4:'6.62%',new5:'5.62%',new6:'0.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
          {date: '沪深50',name: '向上',address: '向下',new2:'40.62%',new3:'10.62%',new4:'40.62%',new5:'40.62%',new6:'0.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%'}, 
        
        ],
        datalinew:[
          {name:'早评：沪指小幅高开0.09% 钢铁板块拖累市场'},
          {name:'【早评：沪指早盘小幅高开 有色钒概念股持续活跃】'},
          {name:'CCTV证券资讯《东方关注》走进总惦搨煎饼 小煎饼也有大生意经'},
          {name:'江苏天鼎证券：A股入“富”成功 揭秘三大受益板块'},
          {name:'江苏天鼎证券：政策支持加码 医药板块投资价值凸显'},
          {name:'区块链集团将与华贤投资控股在区块链领域开展联合投资'},
          {name:'华兴资本交出上市后首份“成绩单” 上半年业绩成倍增长超预期'},
          {name:'A股“入富”将带来更多活水'},
          {name:'万亿外资集结A股牛市一触即发！4金股望强势冲涨停'},
          {name:'社科院：中国一二线城市房地产“金九银十”或落空'},
        ],
        datalinew1:[
          {name: '早评：沪指小幅高开0.09% 钢铁板块拖累市场'},
          {name:'【早评：沪指早盘小幅高开 有色钒概念股持续活跃】'},
          {name:'CCTV证券资讯《东方关注》走进总惦搨煎饼 小煎饼也有大生意经'},
          {name:'江苏天鼎证券：A股入“富”成功 揭秘三大受益板块'},
          {name:'江苏天鼎证券：政策支持加码 医药板块投资价值凸显'},
          {name:'区块链集团将与华贤投资控股在区块链领域开展联合投资'},
          {name:'华兴资本交出上市后首份“成绩单” 上半年业绩成倍增长超预期'},
          {name:'A股“入富”将带来更多活水'},
          {name:'万亿外资集结A股牛市一触即发！4金股望强势冲涨停'},
          {name:'社科院：中国一二线城市房地产“金九银十”或落空'},
        ],
        resData: '',
        echartsOption: {
          backgroundColor:'red',
          title: {
            text: '上证指数',
            left: 'center',
            color: 'red',
            textStyle:{//图例文字的样式
                color:'#F93C5E',
                fontSize:28
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          
          legend: {
            data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
            left: 'right',
            textStyle:{//图例文字的样式
                color:'#ccc',
                fontSize:16,
                
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          xAxis: {
            type: 'category',
            data: [],
            scale: true,
            boundaryGap: false,
            axisLine: { 
              onZero: false,
              lineStyle: {
                  type: 'solid',
                  fontSize:13,
                  color: '#1AB9D0',//左边线的颜色
                  width:'2',//坐标线的宽度
                  borderColor:'#1AB9D0'
              }
             },
             axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
            
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          },
          yAxis: {
            scale: true,
            splitArea: {
              show: true
            },
            axisLine: { 
              onZero: false,
              lineStyle: {
                  type: 'solid',
                  fontSize:13,
                  color: '#1AB9D0',//左边线的颜色
                  width:'2',//坐标线的宽度
                  borderColor:'#1AB9D0'
              }
             },
          },
          dataZoom: [
            {
              type: 'inside',
              start: 30,
              end: 70
            },
            {
              show: true,
              type: 'slider',
              y: '90%',
              start: 0,
              end: 75
            }
          ],
          series: [
            {
              name: '日K',
              type: 'k',
              data: [],
              itemStyle: {
                normal: {
                  color: '#ec0000',
                  color0: '#00da3c',
                  borderColor: '#8A0000',
                  borderColor0: '#008F28'
                }
              },
              markPoint: {
                label: {
                  normal: {
                    formatter: function (param) {
                      return param != null ? Math.round(param.value) : ''
                    }
                  }
                },
                data: [
                  {
                    name: 'highest value',
                    type: 'max',
                    valueDim: 'highest'
                  },
                  {
                    name: 'lowest value',
                    type: 'min',
                    valueDim: 'lowest'
                  },
                  {
                    name: 'average value on close',
                    type: 'average',
                    valueDim: 'close'
                  }
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '')
                  }
                }
              },
              markLine: {
                symbol: ['none', 'none'],
                data: [
                  [
                    {
                      name: 'from lowest to highest',
                      type: 'min',
                      valueDim: 'lowest',
                      symbol: 'circle',
                      symbolSize: 10,
                      label: {
                        normal: { show: false },
                        emphasis: { show: false }
                      }
                    },
                    {
                      type: 'max',
                      valueDim: 'highest',
                      symbol: 'circle',
                      symbolSize: 10,
                      label: {
                        normal: { show: false },
                        emphasis: { show: false }
                      }
                    }
                  ]
                ]
              }
            },
            {
                name: 'MA5',
                type: 'line',
                data: "",
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: "",
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: "",
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: "",
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
          ]
        },

        // stockbox
        stockboxOption : {
          // tooltip: {
          //     trigger: 'axis',
          //     position: function (pt) {
          //         return [pt[0], '10%'];
          //     }
          // },
          title: {
              left: 'left',
              text: '行业舆情实时榜',
              textStyle:{//图例文字的样式
                color:'#1AC5DC',
                fontSize:20
            }
          },
          legend: {
            left:'right',
            data: ['舆情指数', '泸深300'],
            textStyle:{//图例文字的样式
                color:'#1AC5DC',
                fontSize:12,
                
            }
          },
          // toolbox: {
          //     feature: {
          //         dataZoom: {
          //             yAxisIndex: 'none'
          //         },
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: "",
              axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
          },
          yAxis: {
              type: 'value',
              boundaryGap: [0, '100%'],
              axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 10
            }, {
              start: 0,
              end: 10,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                  color: '#fff',
                  shadowBlur: 3,
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
              }
          }],
          series: [
              {
                  name:'舆情指数',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  sampling: 'average',
                  itemStyle: {
                    normal:{
                      color: 'RGB(212, 114, 111)'
                    }
                      
                  },
                  areaStyle: {
                    normal:{
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'RGB(212, 114, 111)'
                      }, {
                          offset: 1,
                          color: 'RGB(212, 114, 111)'
                      }])
                    }
                      
                  },
                  data: ""
              },
              {
                  name:'泸深300',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  sampling: 'average',
                  itemStyle: {
                    normal:{
                      color: 'RGB(109, 125, 135)'
                    }
                      
                  },
                  areaStyle: {
                    normal:{
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'RGB(109, 125, 135)'
                      }, {
                          offset: 1,
                          color: 'RGB(109, 125, 135)'
                      }])
                    }
                      
                  },
                  data: ""
              }
          ]
        },
        graphOptions:{
								title: {
									text: "",
									subtext: "",
									top: "top",
									left: "center"
								},
								tooltip: {},
								color: ['#00FA9A', '#08a9f2', '#FFA500', '#ffdf33'],
								//				animation:false,
								//              animationThreshold:200,
								animation: true,
								//{boolean} false,
								animationThreshold: 20,
								animationDuration: 2,
								animationEasingUpdate: 'quinticInOut',
								series: [
                  {
                    name: '',
                    type: 'graph',
                    layout: 'force',
                    force: {
                      repulsion: 100
                    },
                    grid: {
                            left: '1%',   //距离左边的距离
                            right: '1%', //距离右边的距离
                            //      bottom: '8%',//距离下边的距离
                            //      top: '12%' //距离上边的距离
                    },
                    data: "",
                    links: "",
                    categories: "",
                    focusNodeAdjacency: true,
                    roam: true,
                    label: {
                      normal: {
                        show: true,
                        position: '',
                      }
                    },
                    lineStyle: {
                      normal: {
                        color: '#BC8F8F',
                        curveness: 0,
                        type: "solid"
                      }
                    }
                  }
                ]
							}
        


        }
      
    },
    mounted () {
      this.setEchartOption()
      this.myChart = echarts.init(document.getElementById('myChart'))
      this.myChart.setOption(this.echartsOption)



      this.stockboxload()
      this.stockbox = echarts.init(document.getElementById('stockbox'))
      this.stockbox.setOption(this.stockboxOption)
      // 图表显示
      this.graphload()
      this.graphbox = echarts.init(document.getElementById('graphbox'))
      this.graphbox.setOption(this.graphOptions)
    },
    methods: {

    tableHeaderColor({row, column, rowIndex, columnIndex}){
      return 'background-color: #3484f5;color: #3484f5;'
    },

      tableRowStyle({ row, rowIndex }) {
      return 'background-color: #141e32'
    },


      setEchartOption () {
        // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
        this.resData = splitData([
          ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
          ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
          ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
          ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
          ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
          ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
          ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
          ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
          ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
          ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
          ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
          ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
          ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
          ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
          ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
          ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
          ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
          ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
          ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
          ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
          ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
          ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
          ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
          ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
          ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
          ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
          ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
          ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
          ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
          ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
          ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
          ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
          ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
          ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
          ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
          ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
          ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
          ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
          ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
          ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
          ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
          ['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
          ['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
          ['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
          ['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
          ['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
          ['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
          ['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
          ['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
          ['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
          ['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
          ['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
          ['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
          ['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
          ['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
          ['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
          ['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
          ['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
          ['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
          ['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
          ['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
          ['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
          ['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
          ['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
          ['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
          ['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
          ['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
          ['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
          ['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
          ['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
          ['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
          ['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
          ['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
          ['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
          ['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
          ['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
          ['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
          ['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
          ['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
          ['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
          ['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
          ['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
          ['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
          ['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
          ['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
          ['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
          ['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
          ['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
        ])
        this.echartsOption.xAxis.data = this.resData.categoryData
        this.echartsOption.series[0].data = this.resData.values

        function splitData (rawData) {
          var categoryData = []
          var values = []
          for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0])
            values.push(rawData[i])
          }
          return {
            categoryData: categoryData,
            values: values
          }
        }
      },
      stockboxload(){
        var base = +new Date(2010, 9, 3);
        var oneDay = 24 * 3600 * 100;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        var data1 = [Math.random() * 400];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
        }

        this.stockboxOption.xAxis.data = date
        this.stockboxOption.series[0].data = data
        this.stockboxOption.series[1].data = data1
       
      },
      // 图表显示
      graphload(){
         console.log(this.graphOptions,"ddddddddd")
        var  responses = {
          "nodes": [{
              "name": "上证指数",
              "symbolSize": 80,
              "category": "0",
              "draggable": "true",
              "value": "0.4925",
              "itemStyle": {
                  "normal": {
                      "color": "#F93C5E"
                  }
              }
          },
          {
              "name": "服装家纺",
              "symbolSize": 65,
              "category": "1",
              "draggable": "true",
              "value": "3.313",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "嘉麟杰",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "4.0714",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "太平鸟",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.6129",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "希努尔",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.6",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "际华集团",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.4706",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "贵人鸟",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.1667",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "纺织制造",
              "symbolSize": 65,
              "category": "1",
              "draggable": "true",
              "value": "3.1591",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "华纺股份",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.7317",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "浙江富润",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.102",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "华升股份",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.0526",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "上海三毛",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.75",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "公交",
              "symbolSize": 65,
              "category": "1",
              "draggable": "true",
              "value": "2.7744",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "德新交运",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "强生控股",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.7778",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "大众交通",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.5455",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "煤炭开采加工",
              "symbolSize": 65,
              "category": "1",
              "draggable": "true",
              "value": "2.5583",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "陕西煤业",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.3333",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "美锦能源",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.5",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "山西焦化",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.4",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "宝泰隆",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "燃气水务",
              "symbolSize": 65,
              "category": "1",
              "draggable": "true",
              "value": "2.4204",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "重庆燃气",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "3.2",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "大通燃气",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.9524",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "陕天然气",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.9091",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "长春燃气",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.9057",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          },
          {
              "name": "深圳燃气",
              "symbolSize": 50,
              "category": "2",
              "draggable": "true",
              "value": "2.8889",
              "itemStyle": {
                  "normal": {
                      "color": "#1B6BA0"
                  }
              }
          }],
          "links": [{
              "source": "上证指数",
              "target": "服装家纺"
          },
          {
              "source": "服装家纺",
              "target": "嘉麟杰"
          },
          {
              "source": "服装家纺",
              "target": "太平鸟"
          },
          {
              "source": "服装家纺",
              "target": "希努尔"
          },
          {
              "source": "服装家纺",
              "target": "际华集团"
          },
          {
              "source": "服装家纺",
              "target": "贵人鸟"
          },
          {
              "source": "上证指数",
              "target": "纺织制造"
          },
          {
              "source": "纺织制造",
              "target": "华纺股份"
          },
          {
              "source": "纺织制造",
              "target": "浙江富润"
          },
          {
              "source": "纺织制造",
              "target": "	华升股份"
          },
          {
              "source": "纺织制造",
              "target": "上海三毛"
          },
          {
              "source": "上证指数",
              "target": "公交"
          },
          {
              "source": "公交",
              "target": "德新交运"
          },
          {
              "source": "公交",
              "target": "强生控股"
          },
          {
              "source": "公交",
              "target": "大众交通"
          },
          {
              "source": "上证指数",
              "target": "煤炭开采加工"
          },
          {
              "source": "煤炭开采加工",
              "target": "陕西煤业"
          },
          {
              "source": "煤炭开采加工",
              "target": "美锦能源"
          },
          {
              "source": "煤炭开采加工",
              "target": "山西焦化"
          },
          {
              "source": "煤炭开采加工",
              "target": "宝泰隆"
          },
          {
              "source": "上证指数",
              "target": "燃气水务"
          },
          {
              "source": "燃气水务",
              "target": "重庆燃气"
          },
          {
              "source": "燃气水务",
              "target": "大通燃气"
          },
          {
              "source": "燃气水务",
              "target": "陕天然气"
          },
          {
              "source": "燃气水务",
              "target": "长春燃气"
          },
          {
              "source": "燃气水务",
              "target": "深圳燃气"
          }],
          "categories": [{
              "name": "0"
          },
          {
              "name": "1"
          },
          {
              "name": "2"
          }]
      };
        this.graphOptions.series[0].data = responses.nodes
        this.graphOptions.series[0].links = responses.links
        this.graphOptions.series[0].categories = responses.categories
      }

    }
  }
</script>
<style   >

  .chart{
    /* margin-top: 60px; */
    text-align: center;
  }
  .el-table .warning-row{
    background: #141e32;
  }
  .titleESB{
    line-height: 100px;
    text-align: center;
    font-family: PingFangSC-Medium;
    font-size: 40px;
    color: #FBFBFB;
    letter-spacing: 0;
    text-align: justify;
  }
  .table-bordered{
      border: 1px solid #000;
      width: 100%;
      
    }
    
    .feader_table{
      background-color: #080c1b;
      margin-bottom: 30px;
    }
    .feader_table div{
      height: 100%;
      float: left;
      
    }
    .tablebox{
      margin: 50px 30px 20px 30px;
    }
    .zhongxing{
      padding-top: 20px;
      text-align: center;
      font-family: PingFangSC-Semibold;
      font-size: 28px;
      color: #F93C5E;
      letter-spacing: 0;
      /* text-align: justify; */
    }
    .publicCenter div {
      text-align: left;
      float: left;
      margin-top: 30px;
      padding-bottom: 50px;
    }
    .publicCenter a {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: justify;
      float: right;
      margin-right: 30px;
      margin-top: -30px;     

    }
    .publicCenter h3 {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #1AC5DC;
      letter-spacing: 0;
      text-align: justify;
      margin-bottom: 10px;    

    }
    .publicCenter li {
      height: 40px;
      list-style:square;
      margin-left: 20px;
      line-height: 40px;
    }
    .publicCenter li:hover {
      background-color: #eaedf4;
    }
    .frontPublic{
      width: 50%;
      padding-left: 20px;
    }
    .defeatPublic{
      width: 50%;
      padding-left: 20px;
      
    } 
    .backcolor{
      margin-top: 30px;
      height: 1080px;
      background-color: #141e32!important;
    }
    #myChart{
      background-color: #141e32!important;
      width: 100%;
      height: 300px;
      margin: 0 auto;
    }
    #stockbox{
      width: 100%;
      height: 300px;
      margin: 0 auto;
    }
    .tables{
      margin-bottom: 20px;
      float: left;
          width: 40%;
          margin: 0 5%;
          margin-top: 50px;
    }
    .tables .el-table__header-wrapper{
      display: none!important;
    }
    .centerzx .boxecharts{
      float: left;
    }
    .tables a {
      margin-top: -30px;
      float: right;
      margin-right: 20px;
      display: block;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: justify;
    }
    .tables h3{
      margin-bottom: 10px;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #1AC5DC;
      letter-spacing: 0;
      text-align: justify;
    }
    #graphbox{
      width: 100%;
      height: 300px;
      margin:  0 auto;
    }
    .centerbox{
       color: #fff;
    }
    .centerbox li:hover{
      background-color: #363a42;
      /* color: #000; */
    }
    .centerbox:hover{
      background-color: #363a42;
      cursor:pointer
    }
    tr{
      background-color: #000;

    }
    .cell{
      color: #fff; 
      
    }
      /* .el-table .warning-row {
    background: #141e32;
  }
  
  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid #282F4A;
}

  .el-table .success-row {
    background: #777;
  }
  .el-table{
    background-color: #141e32;
    color: #fff;
  }
  table .el-table__body .el-table tr {
    background-color: #141e32;
  }

.el-table .el-table__body tr:hover td {
    color: red;
} */
el-tabs__header{
  border-bottom: none;
}
 .el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #363a42 !important;
}
</style>
